<template>
    <div class="cropperCont">
        <div class="cropperForm">
            <div  v-if="!cropperImg" class="noChangeImg">
                <img class="upImg" src="/img/upImg.png" />
            </div>
            <img v-if="cropperImg" class="cropperImg" :src="cropperImg" />
            <input ref="file" accept="image/*" type="file" @change="handleFileChange" />
        </div>
      <div v-if="showCropper" class="cropperMask" :style="'min-height: '+$docHeight+'px'">
            <!-- 图片裁剪器 -->
        <cropper
            ref="cropper"
            :guides="true"
            :view-mode="2"
            :auto-crop-area="0.5"
            :aspect-ratio="1"
            :rotatable="true"
            :scalable="true"
            :crop-box-resizable="true"
            :crop-box-min-size="[100, 100]"
            :crop-box-max-size="[500, 500]"
        ></cropper>
        
        <!-- 裁剪按钮 -->
        <div class="cropperCtrl">
            <div class="cacelCropperBtn" @click="showCropper = false">取消裁剪</div>
            <div class="sureCropperBtn" @click="cropImage">确认裁剪</div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import 'cropperjs/dist/cropper.css';
  import VueCropper from 'vue-cropperjs';
  import { showFailToast,showLoadingToast } from 'vant';
  import $ from "jquery";

  export default {
    components: {
      cropper: VueCropper,
    },
    data(){
        return {
            cropperImg:'',
            showCropper:false,
        }
    },
    methods: {
      // 文件选择变化事件处理函数
      handleFileChange(event) {
        const file = event.target.files[0];
        if (!file) return;
  
        const reader = new FileReader();
        reader.onload = (e) => {
          this.$refs.cropper.replace(e.target.result);
        };
        reader.readAsDataURL(file);
        this.showCropper = true
      },
      // 裁剪图片
      cropImage() {
        this.$refs.cropper.getCroppedCanvas().toBlob((file) => {
        // 处理裁剪后的图片，比如上传到服务器
        let formData = new FormData();// 可以增加表单数据
            formData.append("file",file);
            const toast = showLoadingToast({
                message: '裁剪中...',
                forbidClick: true,
                duration:60000,
            });
            $.ajax({
                url:this.$apis+'/common/Upload/UpImg',
                dataType:"json",
                type:'post',
                processData : false,
                contentType : false,
                data:formData,
                success:(res)=>{
                    if(res.code==1){
                        this.cropperImg = res.data.src
                        this.$emit('ok',res.data.src)
                        this.showCropper = false
                    }else{
                        showFailToast('裁剪失败');
                    }
                    toast.close()
                },
                error:(res)=>{
                    toast.close()
                    showFailToast('裁剪失败');
                }
            })
        })
      },
    },
  };
  </script>
  <style scoped lang="less">
  .cropperCont{
    .cropperForm{
        width: 5rem;
        height: 5rem;
        border-radius: 0.25rem;
        background-color: #f7f8fa;
        position: relative;
        margin-bottom: 1rem;
        .upIcon{
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: 0.9rem;
            color: #fff;
            width: 1.5rem;
            height: 1.5rem;
            background-color: black;
            text-align: center;
            line-height: 1.5rem;
            border-radius: 0.75rem 0 0 0;
        }
        input{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
        .noChangeImg{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 40%;
            }
        }
        img{
            width: 100%;
        }
    }
    .cropperMask{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: black;
    position: fixed;
    left: 0;
    top: 0;
    .cropperCtrl{
        width: 92%;
        margin: 0.75rem auto;
        display: flex;
        justify-content: space-between;
        .cacelCropperBtn,.sureCropperBtn{
            background-color: #fff;
            line-height: 2rem;
            border-radius: 0.25rem;
            width: 46%;
            text-align: center;
        }
    }
  }
  }
  
  </style>
<style>
.cropper-bg {
  background-image: none !important;
}
.cropper-bg{
  background-image: url(/img/cropper_bg.png) !important;
}
</style>